<template>
  <div class="order-box">
    <el-container>
      <!-- 头部部分 -->
      <el-header class="header">
        <el-select
          v-model="value"
          class="order-sel"
          placeholder="按照收件人搜索"
          style="width: 150px; height: 40px; color: black"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="input"
          placeholder="订单号"
          class="order-input"
          style="width: 150px; height: 40px; margin-left: 10px"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          style="margin-left: 10px"
          @click="getOrderSearch"
          >搜索</el-button
        >
      </el-header>

      <!-- 主体表格部分 -->
      <el-main>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%; max-height: 500px"
          border
        >
          <el-table-column prop="orderId" label="订单号" width="180">
          </el-table-column>
          <el-table-column prop="recipient" label="收件人" width="180">
          </el-table-column>
          <el-table-column prop="status" label="订单状态">
          </el-table-column>
          <el-table-column prop="allPrice" label="订单总价">
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间">
          </el-table-column>
          <el-table-column fiexd="right" label="操作">
            <template>
              <router-link to="/orderDetail">
                <p
                  style="color: orange; font-size: 12px; height: 100%"
                  class="thisMyFather"
                >
                  查看详情页
                </p>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

      <!-- 尾部分页器 -->
      <el-footer>
        <el-footer>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="1"
            :page-size="5"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
// var a=document.getElementsByClassName('thisMyFather')
// console.log(a)
// for(var i=0;i<a.length;i++){
//   a.document.d
// }
import getInitOrder from "../../api/reqOrder";
import getOrderSearch from "../../api/getOrderSearch";

export default {
  data() {
    return {
      total: 1,
      input: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "断网了吧。",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "别看了，没获取到数据",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "别看了，没获取到数据",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "别看了，没获取到数据",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      options: [
        {
          value: "recipient",
          label: "按照收件人搜索",
        },
        {
          value: "orderId",
          label: "按照订单号搜索",
        },
      ],
      value: "recipient",
      req: {
        pageNum: 0,
        pageSize: 0,
      },
      req2: {
        type: "",
        value: "",
        pageNum: 1,
        pageSize: 5,
      },
      resInit: {},
    };
  },
  methods: {
    //查询渲染数据   有bug
    getOrderSearch() {
      this.req2.value = this.input;
      this.req2.type = this.value;
      console.log(this.req2);
      // console.log(this.input,this.value)
      getOrderSearch(this.req2).then((a) => {
        console.log(a);
        this.tableData = a.data.data.list;
        this.total = a.data.data.total;
         console.log(this.tableData)
      });
    },
    // say() {
    //   alert('点什么点，憨批？！！！')
    // },
    handleCurrentChange(index) {
      this.req.pageNum = index;
      getInitOrder(this.req).then((a) => {
        this.tableData = a.data.data.list;
        this.total = a.data.data.total;
       
      });
    },
  },

  // 初始化数据
  mounted() {
    getInitOrder(this.req).then((a) => {
      this.tableData = a.data.data.list;
      this.total = a.data.data.total;
    });
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/order.css";
</style>